
<div style="POSITION: relative" id="content">
  <h3>使用easyui创建tabs组件和动态添加 </h3>
  <div id="article_content" class="article_content">
    <p>当使用jQuery EasyUI 容易的添加tabs,你就应该调用'add'方法.</p>
    <p>在这个示例中我们将动态的添加tabs使用iframe显示在一个页面上,当点击add按钮一个新的tab将被添加,如果tab已经存在,它将被激活.</p>
    <p><img src="documentation/images/1344482975_6486.png" alt=""></p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 步骤1:创建 tabs</h4>
    <pre name="code" class="html">&lt;div style=&quot;margin-bottom:10px&quot;&gt;  
    &lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; onclick=&quot;addTab('google','http://www.google.com')&quot;&gt;google&lt;/a&gt;  
    &lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; onclick=&quot;addTab('jquery','http://jquery.com/')&quot;&gt;jquery&lt;/a&gt;  
    &lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; onclick=&quot;addTab('easyui','http://jeasyui.com/')&quot;&gt;easyui&lt;/a&gt;  
&lt;/div&gt;  
&lt;div id=&quot;tt&quot; class=&quot;easyui-tabs&quot; style=&quot;width:400px;height:250px;&quot;&gt;  
    &lt;div title=&quot;Home&quot;&gt;  
    &lt;/div&gt;  
&lt;/div&gt;  </pre>
    <p>这个html代码非常简单,我们创建tabs 和一个tab panel命名叫Home,记得我们不需要写任何的js代码.</p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 步骤 2:实现 'addTab' 函数</h4>
    <pre name="code" class="javascript">function addTab(title, url){  
    if ($('#tt').tabs('exists', title)){  
        $('#tt').tabs('select', title);  
    } else {  
        var content = '&lt;iframe scrolling=&quot;auto&quot; frameborder=&quot;0&quot;  src=&quot;'+url+'&quot; style=&quot;width:100%;height:100%;&quot;&gt;&lt;/iframe&gt;';  
        $('#tt').tabs('add',{  
            title:title,  
            content:content,  
            closable:true  
        });  
    }  
} </pre>
    我们使用'exists'方法决定tab是否已经存在,如果存在就激活tab,没有就调用 'add' 方法添加一个新的panel.
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载EasyUI 示例代码:</h4>
    <div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px"> <a href="http://www.jeasyui.com/tutorial/layout/downloads/easyui-tabs2-demo.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-tabs-demo.zip</a></div>
  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>